<template>
	<view class="outview">
		<view class="change">
			<view class="changeone">刷新完成</view>
			<view class="changetwo">上次更新 {{dateFormat(date)}}</view>
		</view>
		<view style="height: 40rpx;"></view>
		<view v-for="(item,index) in messages" class="messages">
			<view class="timeup">{{item.timeup}}</view>
			<view scroll-y="true" class="main">
				<uni-card :title=item.title :isFull="true" :sub-title=item.secondtitle :extra=item.timedown >
					<view class="clicks">点击查看<uni-icons type="forward" size="15"></uni-icons></view>
				</uni-card>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				date: new Date().toISOString(),
				messages: [{
					title: "世德平台公告",
					secondtitle: "《明天早晨app内部更新》",
					timeup: "2023年06月15日",
					timedown: "16:00"
				}, {
					title: "世德平台公告",
					secondtitle: "世德物流提醒:平安记心中，安全伴您行",
					timeup: "2023年06月13日",
					timedown: "11:23"
				}, {
					title: "世德平台公告",
					secondtitle: "《今天下午app内部更新》",
					timeup: "2023年06月11日",
					timedown: "07:30"
				}]
			}
		},
		onLoad() {
			let _this = this;
			setInterval(function() {
				_this.date = Date.parse(new Date());
			}, 1000);
		},
		methods: {
			dateFormat(time) {
				let date = new Date(time);
				let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				return month + "-" + day + " " + hours + ":" + minutes;
			},

		},





	}
</script>

<style>
	.outview{
		width: 100%;
		height: 100%;
	}
	.change {
		margin-top: 30rpx;
		display: flex;
		justify-content: center;
		flex-flow: column nowrap;
		align-items: center;
		color: #7E8186;
	}

	.changeone {
		font-size: 34rpx;
	}

	.changetwo {
		font-size: 26rpx;
		margin-top: -4rpx;
	}
	
	.messages{
		display: flex;
		justify-content: center;
		flex-flow: column nowrap;
		align-items: center;
	}
	
	.timeup{
		margin-top: 30rpx;
		font-size: 30rpx;
		width: 280rpx;
		height: 50rpx;
		background-color: #EAE9EA;
		color: #B6B6B8;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.main{
		margin-top: 30rpx;
		width: 90%;
	}
	
	.clicks{
		margin-left: 76%;
	}
</style>
